import React, { useEffect } from 'react';
import { Form, Drawer, Button, Spin, ConfigProvider } from 'antd';
import { AddEmployee, employeeUtils } from '@/components/Organization';

const { useInit, handleSubmit, searchDic, getFormData } = employeeUtils;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
    }
};
/**
 * 组织架构新增员工抽屉
 */
const DrawerEmployee = props => {
    const {
        form,
        onOk,
        onCancel,
        visible,
        // 组织架构树
        treeNode,
        // 作为判断编辑和新增的条件
        userCode = null,
        // 是否修改 z-index
        modifyZIndex = false
    } = props;
    const user = localStorage.getItem('user');
    const { companyId } = user ? JSON.parse(user) : {};
    const {
        formData,
        setFormData,
        dictionary,
        setDictionary,
        loading,
        setLoading,
        obaCompanyId,
        setObaCompanyId,
        spinning,
        setSpinning,
        companyName,
        setCompanyName,
        postTypeRemark,
        setPostTypeRemark
    } = useInit();

    const saveUpdate = () => {
        handleSubmit({
            setLoading,
            form,
            userCode,
            formData,
            companyName,
            callback: onOk
        });
    };
    useEffect(() => {
        const init = () => {
            if (treeNode.id) {
                setObaCompanyId(treeNode.companyId)
            }
            if (userCode) {
                searchDic({ setDictionary, setSpinning });
                getFormData({
                    userCode, setObaCompanyId, setPostTypeRemark, setFormData, setSpinning
                });
            } else {
                searchDic({ setDictionary, setSpinning });
            }
        };
        form.resetFields();
        init();
    }, [visible]);
    return (
        <Drawer
            style={modifyZIndex ? {
                zIndex: '1031'
            } : {}}
            title={userCode ? '编辑员工' : '新增员工'}
            width={520}
            onClose={onCancel}
            visible={visible}
            bodyStyle={{ padding: '0 0 60px 0' }}
        >
            <ConfigProvider getPopupContainer={trigger => trigger.parentNode}>
                <Spin spinning={ spinning
                }>
                    <Form {...formItemLayout}>
                        <AddEmployee
                            form={form}
                            treeNode={treeNode}
                            userCode={userCode}
                            formData={formData}
                            dictionary={dictionary}
                            setPostTypeRemark={setPostTypeRemark}
                            setObaCompanyId={setObaCompanyId}
                            setCompanyName={setCompanyName}
                            postTypeRemark={postTypeRemark}
                            obaCompanyId={obaCompanyId}
                            localCompanyId={companyId}
                        />
                    </Form>
                </Spin>
                <div
                    style={{
                        position: 'absolute',
                        right: 0,
                        bottom: 0,
                        width: '100%',
                        borderTop: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'right'
                    }}
                >
                    <Button onClick={onCancel} style={{ marginRight: 8 }}>
                        取消
                    </Button>
                    <Button
                        onClick={saveUpdate}
                        type="primary"
                        loading={loading}
                    >
                        保存
                    </Button>
                </div>

            </ConfigProvider>
        </Drawer>
    );
};

export default Form.create()(DrawerEmployee);
